<template>
  <view class="login-container">
    <view class="login-box">
      <!-- 登录标题 -->
      <view class="login-title">账号登录</view>
      
      <!-- 登录表单 -->
      <view class="login-form">
        <!-- 账号输入 -->
        <view class="form-item">
          <view class="input-wrapper">
            <text class="input-icon">👤</text>
            <input 
              class="form-input" 
              type="text" 
              placeholder="请输入账号" 
              v-model="loginForm.username"
              placeholder-style="color: #999;" 
            />
          </view>
          <text v-if="errors.username" class="error-text">{{ errors.username }}</text>
        </view>
        
        <!-- 密码输入 -->
        <view class="form-item">
          <view class="input-wrapper">
            <text class="input-icon">🔒</text>
            <input 
              class="form-input" 
              :type="showPassword ? 'text' : 'password'" 
              placeholder="请输入密码" 
              v-model="loginForm.password"
              placeholder-style="color: #999;" 
            />
            <text class="password-toggle" @click="togglePasswordVisibility">
              {{ showPassword ? '👁️‍🗨️' : '👁️' }}
            </text>
          </view>
          <text v-if="errors.password" class="error-text">{{ errors.password }}</text>
        </view>
        
        <!-- 记住密码和忘记密码 -->
        <view class="login-options">
          <view class="remember-password" @click="toggleRememberPassword">
            <view class="checkbox" :class="{ 'checked': rememberPassword }">
              <text v-if="rememberPassword" class="check-icon">✓</text>
            </view>
            <text class="option-text">记住密码</text>
          </view>
          <text class="forgot-password" @click="forgotPassword">忘记密码？</text>
        </view>
        
        <!-- 登录按钮 -->
        <button class="login-button" @click="handleLogin" :disabled="isLoggingIn">
          {{ isLoggingIn ? '登录中...' : '登录' }}
        </button>
      </view>
      
      <!-- 其他登录方式 -->
      <view class="other-login">
        <view class="divider">
          <view class="line"></view>
          <text class="divider-text">其他登录方式</text>
          <view class="line"></view>
        </view>
        
<!--        <view class="login-methods">
          <view class="method-item" @click="wechatLogin">
            <text class="method-icon">📱</text>
            <text class="method-text">微信登录</text>
          </view>
          <view class="method-item" @click="phoneLogin">
            <text class="method-icon">📞</text>
            <text class="method-text">手机号登录</text>
          </view>
        </view> -->
      </view>
    </view>
  </view>
</template>

<script>
	import { Setlogin } from '../../api/login';
export default {
  name: 'LoginPage',
  data() {
    return {
      // 登录表单数据
      loginForm: {
        username: '',
        password: ''
      },
      // 错误信息
      errors: {
        username: '',
        password: ''
      },
      // 密码可见性控制
      showPassword: false,
      // 记住密码状态
      rememberPassword: false,
      // 登录中状态
      isLoggingIn: false
    };
  },
  
  onLoad() {
    // 检查是否有记住的密码
    this.checkRememberedPassword();
  },
  
  methods: {
    // 检查是否有记住的密码
    checkRememberedPassword() {
      try {
        const savedUsername = uni.getStorageSync('rememberedUsername');
        const savedPassword = uni.getStorageSync('rememberedPassword');
        
        if (savedUsername && savedPassword) {
          this.loginForm.username = savedUsername;
          this.loginForm.password = savedPassword;
          this.rememberPassword = true;
        }
      } catch (e) {
        console.error('读取本地存储失败:', e);
      }
    },
    
    // 切换密码可见性
    togglePasswordVisibility() {
      this.showPassword = !this.showPassword;
    },
    
    // 切换记住密码状态
    toggleRememberPassword() {
      this.rememberPassword = !this.rememberPassword;
    },
    
    // 表单验证
    validateForm() {
      let isValid = true;
      
      // 重置错误信息
      this.errors = {
        username: '',
        password: ''
      };
      
      // 验证账号
      if (!this.loginForm.username.trim()) {
        this.errors.username = '请输入账号';
        isValid = false;
      }
      
      // 验证密码
      if (!this.loginForm.password) {
        this.errors.password = '请输入密码';
        isValid = false;
      } else if (this.loginForm.password.length < 6) {
        this.errors.password = '密码长度不能少于6位';
        isValid = false;
      }
      
      return isValid;
    },
    
    // 处理登录
    async handleLogin() {
      // 表单验证
      if (!this.validateForm()) {
        return;
      }
      // let res= await Setlogin({account:this.loginForm.username,password:this.loginForm.password})
      //   if(res.code==1){
      // 			 // 模拟登录成功
      // 			 const loginSuccess = true; // 假设登录成功
      // 		 }else{
      // 			 console.log('登录失败')
      // 		 }
      // 设置登录中状态
      this.isLoggingIn = true;
      
      // 模拟登录请求

        // 这里应该是实际的登录API调用
        // console.log('登录请求参数:', {
        //   username: this.loginForm.username,
        //   password: this.loginForm.password
        // });
       let res= await Setlogin({account:this.loginForm.username,password:this.loginForm.password})
         if(res.code==1){
			 // 登录成功提示
			 uni.showToast({
			   title: '登录成功',
			   icon: 'success',
			   duration: 2000
			 });
			     this.isLoggingIn = false;
			 localStorage.setItem('token',res.data.userinfo.token);
			     uni.navigateTo({
			       url: '/pages/index/index'
			     });
		 }else{
			 console.log('登录失败')
			    this.isLoggingIn = false;
			   uni.showToast({
			     title: '账号或密码错误',
			     icon: 'none',
			     duration: 2000
			   });
		 }
		
        
        // if (loginSuccess) {
        //   // 如果选择记住密码，保存到本地存储
        //   if (this.rememberPassword) {
        //     try {
        //       uni.setStorageSync('rememberedUsername', this.loginForm.username);
        //       uni.setStorageSync('rememberedPassword', this.loginForm.password);
        //     } catch (e) {
        //       console.error('保存登录信息失败:', e);
        //     }
        //   } else {
        //     // 清除之前保存的登录信息
        //     try {
        //       uni.removeStorageSync('rememberedUsername');
        //       uni.removeStorageSync('rememberedPassword');
        //     } catch (e) {
        //       console.error('清除登录信息失败:', e);
        //     }
        //   }
          

          
          // 登录成功后跳转到首页
        //   setTimeout(() => {
        //     uni.navigateTo({
        //       url: '/pages/index/index'
        //     });
        //   }, 2000);
        // } else {
        //   // 登录失败提示
        //   uni.showToast({
        //     title: '账号或密码错误',
        //     icon: 'none',
        //     duration: 2000
        //   });
        // }
        
        // 重置登录中状态
//         this.isLoggingIn = false;
// }
    },
    
    // 忘记密码
    forgotPassword() {
      uni.showModal({
        title: '提示',
        content: '请联系管理员重置密码',
        showCancel: false
      });
    },
    
    // 微信登录
    wechatLogin() {
      uni.showToast({
        title: '微信登录功能开发中',
        icon: 'none',
        duration: 2000
      });
    },
    
    // 手机号登录
    phoneLogin() {
      uni.showToast({
        title: '手机号登录功能开发中',
        icon: 'none',
        duration: 2000
      });
    }
  }
};
</script>

<style scoped>
/* 登录容器 */
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 40rpx 30rpx;
  box-sizing: border-box;
}

/* 登录盒子 */
.login-box {
  width: 100%;
  max-width: 500rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 50rpx 40rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

/* 登录标题 */
.login-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 50rpx;
}

/* 登录表单 */
.login-form {
  width: 100%;
}

/* 表单项 */
.form-item {
  margin-bottom: 30rpx;
}

/* 输入框包装器 */
.input-wrapper {
  display: flex;
  align-items: center;
  height: 90rpx;
  border: 1px solid #ddd;
  border-radius: 10rpx;
  padding: 0 20rpx;
  background-color: #fff;
}

/* 输入框图标 */
.input-icon {
  font-size: 36rpx;
  margin-right: 20rpx;
  color: #999;
}

/* 表单输入框 */
.form-input {
  flex: 1;
  height: 100%;
  font-size: 28rpx;
  color: #333;
}

/* 密码切换按钮 */
.password-toggle {
  font-size: 36rpx;
  color: #999;
}

/* 错误提示文本 */
.error-text {
  display: block;
  font-size: 24rpx;
  color: #f00;
  margin-top: 10rpx;
  padding-left: 56rpx;
}

/* 登录选项 */
.login-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
}

/* 记住密码 */
.remember-password {
  display: flex;
  align-items: center;
}

/* 复选框 */
.checkbox {
  width: 32rpx;
  height: 32rpx;
  border: 1px solid #ddd;
  border-radius: 6rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10rpx;
  background-color: #fff;
}

/* 选中的复选框 */
.checkbox.checked {
  background-color: #007aff;
  border-color: #007aff;
}

/* 选中图标 */
.check-icon {
  font-size: 20rpx;
  color: #fff;
  font-weight: bold;
}

/* 选项文本 */
.option-text {
  font-size: 26rpx;
  color: #666;
}

/* 忘记密码 */
.forgot-password {
  font-size: 26rpx;
  color: #007aff;
}

/* 登录按钮 */
.login-button {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #007aff;
  color: #fff;
  font-size: 32rpx;
  border-radius: 10rpx;
  margin-bottom: 40rpx;
}

/* 禁用的登录按钮 */
.login-button[disabled] {
  background-color: #999;
}

/* 其他登录方式 */
.other-login {
  width: 100%;
}

/* 分隔线 */
.divider {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
}

/* 分隔线 */
.line {
  flex: 1;
  height: 1px;
  background-color: #eee;
}

/* 分隔线文本 */
.divider-text {
  font-size: 26rpx;
  color: #999;
  padding: 0 20rpx;
}

/* 登录方式 */
.login-methods {
  display: flex;
  justify-content: center;
  gap: 60rpx;
}

/* 登录方式项 */
.method-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 登录方式图标 */
.method-icon {
  font-size: 60rpx;
  margin-bottom: 10rpx;
}

/* 登录方式文本 */
.method-text {
  font-size: 24rpx;
  color: #666;
}
</style>